<template>
	<div class="vue_app touchBalance" style="position: relative;width: 100%;height: 100%;padding-top: 5.2rem;">
		<div style="position: absolute;width: 100%;top: 0;">
			<my-header :title="'余额明细'" :hasTitle="true" :hasBack="true"></my-header>
			<!--头部-->
			<tab-head :titleInfor="titleInfor" v-if="titleInfor">
			</tab-head>
		</div>
		<div style="width: 100%;height:100%;">
			<translate-main :lengths="3">
				<ul v-if="initData" class="aui-list aui-media-list detailed_list">
					<li class="aui-list-item" v-for="val in initData">
						<div class="aui-list-item-inner">
							<span class="aui-list-item-title">{{styletouchBalance(val.usedType)}}</span>
							<span class="aui-list-item-title">{{val.usedTm | time}}</span>
							<span class="points"><strong class="pointsok">{{val.usedType=='1'?"-":"+"}}</strong>{{val.usedMoney.toFixed(2)}}</span>
						</div>
					</li>
					<div class="no_data" v-if="initData.length==0" style="background-color: #f1f1f1;">
						<img src="static/image/no_news.png" style="width:70%;" />
						<p>暂无余额数据</p>
					</div>
				</ul>
			</translate-main>
		</div>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import { mapGetters } from "vuex";
	import TabHead from '../../real-components/TabHeadOrder';
	import TranslateMain from '../../real-components/TranslateTest'
	export default {
		data() {
			return {
				titleInfor: [{
					goodsClassId: "",
					goodsClassName: "全部"
				}, {
					goodsClassId: "",
					goodsClassName: "余额增加"
				}, {
					goodsClassId: "",
					goodsClassName: "余额减少"
				}],
				
				touchBalancedata:[],
				giftcardEntityId:''
			}
		},
		components: {
			"my-header": MyHeader,
			"tab-head": TabHead,
			"translate-main": TranslateMain
		},
		methods: {
			styletouchBalance(state){
				if(state==1){
					return "购物消费"
				}else if(state==2){
					return "订单退款"
				}else if(state==3){
					return "激活购物卡"
				}
			},
           queryMyPoints() {
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/giftCardVerification/selectVerificationRecord',
					//url: 'http://172.19.5.199:33004/giftCardVerification/selectVerificationRecord',
					method: 'GET',
					params:{
						giftcardEntityIds:this.giftcardEntityId
					},
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					this.touchBalancedata = res.data.data
				})
			},
			//获取路由上面的卡的信息
			getcardid() {
				this.giftcardEntityId = this.$route.query.cardid
			},
		},
		computed: {
			activeIndex() {
				return this.$store.state.cjy.classifyIndex
			},
			initData() {
				let arr1 = [];
				let arr2 = [];
				if(this.touchBalancedata) {
					for(let i = 0; i < this.touchBalancedata.length; i++) {
						if(this.touchBalancedata[i].usedType == '1') {
							arr1.push(this.touchBalancedata[i]);
						} else {
							arr2.push(this.touchBalancedata[i]);
						}
					}
				}
				if(this.activeIndex == '0') {
					return this.touchBalancedata;
				} else if(this.activeIndex == '2') {
					return arr1;
				} else if(this.activeIndex == '1') {
					return arr2;
				}

			}
		},
		filters: {
			Time: function(time) {
				if(time) {
					let date = new Date(time);
					return `${date.getFullYear()}-${date.getMonth()+ 1}-${date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}:${date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()}`;
				}
			}
		},
		watch: {
			activeIndex(newdata, olddata) {
				/*console.log(this.activeIndex, "activeIndex")*/
			},
		},
		mounted() {
			this.getcardid();
           this.queryMyPoints()
		},
	}
</script>

<style>
	.touchBalance .points {
		font-size: 1rem;
		position: absolute;
		top: 1rem;
		right: 1.5rem;
		display: inline-block;
		color: #EF5423;
	}
	
	.touchBalance .pointsok {
		margin-right: 0.5rem;
		color: #EF5423;
	}
</style>